<template>
  <div>
    <!-- <el-form-item label="占位内容" v-else>
      <el-input v-model="localData.placeholder" clearable placeholder="占位内容" />
    </el-form-item> -->
    <el-form-item label="显示格式" label-width="100px">
      <el-select size="default" v-model="localData.format" v-if="localData.type.includes('date')" clearable>
        <el-option value="YY" label="年(YY)" />
        <el-option value="YYYY" label="年(YYYY)" />
        <el-option value="YYYY-MM" label="年-月" />
        <el-option value="YYYY-MM-DD" label="年-月-日" />
        <el-option value="YYYY-MM-DD HH" label="年-月-日 时" />
        <el-option value="YYYY-MM-DD HH:mm" label="年-月-日 时:分" />
        <el-option value="YYYY-MM-DD HH:mm:ss" label="年-月-日 时:分:秒" />
      </el-select>
      <el-select size="default" v-model="localData.format" v-else clearable>
        <el-option value="HH" label="时" />
        <el-option value="HH:mm" label="时:分" />
        <el-option value="HH:mm:ss" label="时:分:秒" />
      </el-select>
    </el-form-item>
    <el-form-item label="值格式">
      <el-select size="default" v-model="localData.valueFormat" v-if="localData.type.includes('date')" clearable>
        <el-option value="YY" label="年(YY)" />
        <el-option value="YYYY" label="年(YYYY)" />
        <el-option value="YYYY-MM" label="年-月" />
        <el-option value="YYYY-MM-DD" label="年-月-日" />
        <el-option value="YYYY-MM-DD HH" label="年-月-日 时" />
        <el-option value="YYYY-MM-DD HH:mm" label="年-月-日 时:分" />
        <el-option value="YYYY-MM-DD HH:mm:ss" label="年-月-日 时:分:秒" />
      </el-select>
      <el-select size="default" v-model="localData.valueFormat" v-else clearable>
        <el-option value="HH" label="时" />
        <el-option value="HH:mm" label="时:分" />
        <el-option value="HH:mm:ss" label="时:分:秒" />
      </el-select>
    </el-form-item>
    <el-form-item label="默认时间">
      <el-select v-if="localData.type.includes('date')" v-model="localData.defaultDateTime" clearable @change="handleTypeChange">
        <el-option v-for="opt in defaultDateTimeOptions" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
      </el-select>
      <el-select v-else v-model="localData.defaultDateTime" clearable @change="handleTypeChange">
        <el-option v-for="opt in defaultTimeOptions" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="自定义函数" v-if="localData.defaultDateTime == 'custom'">
      <el-input type="textarea" v-model="localData.customDateTimeFunc" />
    </el-form-item>
  </div>
</template>

<script>
import defaultSettings from '@/settings';
export default {
  name: 'ConfigDate',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      defaultDateTimeOptions: [
        {
          label: '上个月',
          value: 'lastmonth'
        },
        {
          label: '昨天',
          value: 'yesterday'
        },
        {
          label: '当前时间',
          value: 'now'
        },
        {
          label: '明天',
          value: 'tomorrow'
        },
        {
          label: '下个月',
          value: 'nextmonth'
        },
        {
          label: '自定义',
          value: 'custom'
        }
      ],
      defaultTimeOptions: [
        {
          label: '6小时前',
          value: '6hpre'
        },
        {
          label: '1小时前',
          value: '1hpre'
        },
        {
          label: '当前时间',
          value: 'now'
        },
        {
          label: '1小时后',
          value: '1hnext'
        },
        {
          label: '6小时后',
          value: '6hnext'
        },
        {
          label: '自定义',
          value: 'custom'
        }
      ]
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    handleTypeChange(value) {
      if (value == 'custom') {
        this.localData.customDateTimeFunc = '(dayjs)=>{\n}';
      }
    }
  }
};
</script>
